<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SentenceSelection</title>
    <style>
        body {
            background: rgb(235, 171, 107);
            font-family: 'Times New Roman', Times, serif;
            font-size: 16pt;
        }

        #sentencetoolbox {
            display: flex;
            background-color: rgb(235, 171, 107);
            box-shadow: rgb(54, 30, 0) 1px 2px 4px;
            position: absolute;
            visibility: hidden;
        }

        #sentencetoolbox input {
            color: whitesmoke;
            background-color: rgb(226, 148, 70);
            border: none;
            padding: 3px;
            font-family: -apple-system, '等线';
            font-size: 12pt;
        }

        #sentencetoolbox input:hover,
        input:focus {
            background-color: peru;
            border: none;
            outline: none;
        }

        #sentencetoolbox span {
            width: 1px;
            background-color: white;
            margin-top: 3px;
            margin-bottom: 3px;
        }
    </style>
    <script>
        window.onload = () => {
            let toolbox = document.getElementById("sentencetoolbox");
            var selection;
            var status = {
                selecting: false,
                boxshowing: false,
                top: "0px",
                left: "0px",
                selectedtext: "",
            };
            let setboxshow = (newshowing = false) => {
                status.boxshowing = newshowing;
                if (status.boxshowing) {
                    toolbox.style.left = (status.left + 2) + "px";
                    toolbox.style.bottom = (window.innerHeight - status.top) + "px";
                    toolbox.style.visibility = "visible";
                }
                else {
                    toolbox.style.visibility = "hidden";
                }
            };

            document.onselectstart = () => {
                status.selecting = true;
            };

            document.onselectionchange = (event) => {
                let selection = document.getSelection();
                console.log("selection change" + ", " + selection);
                if (!selection.isCollapsed) {
                    let startelement = selection.anchorNode.parentElement;
                    let endelement = selection.focusNode.parentElement;
                    status.left = endelement.offsetLeft;
                    status.top = endelement.offsetTop
                }
                status.selectedtext = selection.toString();
            };
            document.onmousedown = (event) => {
                console.log("mouse down");
                if (event.target.parentElement != toolbox && status.boxshowing == true) {
                    setboxshow(false);
                    status.selecting = false;
                }
            }
            document.onmouseup = (event) => {
                console.log("mouse up");
                if (event.target.parentElement != toolbox) {
                    if (status.boxshowing == true) {
                        setboxshow(false);
                        status.selecting = false;
                        status.selectedtext = "";
                    }
                    else if (status.selecting && status.selectedtext.length > 0) {
                        setboxshow(true);
                    }
                }
            };

        };
        function work() {
            console.log("click");
        }
    </script>
</head>

<body>
    <div id="sentencetoolbox">
        <input type="button" value="Copy" onclick="work()">
        <span></span>
        <input type="button" value="❤" onclick="work()">
    </div>
    <div id="content">
        <p class="para">
            <span class="word">Mr</span><span>. </span><span class="word">and</span><span> </span>
            <span class="word">Mrs</span><span>. </span><span class="word">Dursley</span><span>, </span>
            <span class="word">of</span><span> </span><span class="word">number</span><span> </span>
            <span class="word">four</span><span>, </span><span class="word">Privet</span><span> </span>
            <span class="word">Drive</span><span>, </span><span class="word">were</span><span> </span>
            <span class="word">proud</span><span> </span><span class="word">to</span><span> </span>
            <span class="word">say</span><span> </span><span class="word">that</span><span> </span>
            <span class="word">they</span><span> </span><span class="word">were</span><span> </span>
            <span class="word">perfectly</span><span> </span><span class="word">normal</span><span>, </span>
            <span class="word">thank</span><span> </span><span class="word">you</span><span> </span>
            <span class="word">very</span><span> </span><span class="word">much</span><span>. </span>
            <span class="word">They</span><span> </span><span class="word">were</span><span> </span>
            <span class="word">the</span><span> </span><span class="word">last</span><span> </span>
            <span class="word">people</span><span> </span>you'<span class="word">d</span><span> </span>
            <span class="word">expect</span><span> </span><span class="word">to</span><span> </span>
            <span class="word">be</span><span> </span><span class="word">involved</span><span> </span>
            <span class="word">in</span><span> </span><span class="word">anything</span><span> </span>
            <span class="word">strange</span><span> </span><span class="word">or</span><span> </span>
            <span class="word">mysterious</span><span>, </span><span class="word">because</span><span> </span>
            <span class="word">they</span><span> </span><span class="word">just</span><span> </span>didn'
            <span class="word">t</span><span> </span><span class="word">hold</span><span> </span>
            <span class="word">with</span><span> </span><span class="word">such</span><span> </span>nonsense.
            <span class="word">Mr</span><span>. </span><span class="word">Dursley</span><span> </span>
            <span class="word">was</span><span> </span><span class="word">the</span><span> </span>
            <span class="word">director</span><span> </span><span class="word">of</span><span> </span>
            <span class="word">a</span><span> </span><span class="word">firm</span><span> </span>
            <span class="word">called</span><span> </span><span class="word">Grunnings</span><span>, </span>
            <span class="word">which</span><span> </span><span class="word">made</span><span> </span>
            <span class="word">drills</span><span>. </span><span class="word">He</span><span> </span>
            <span class="word">was</span><span> </span><span class="word">a</span><span> </span>
            <span class="word">big</span><span>, </span><span class="word">beefy</span><span> </span>
            <span class="word">man</span><span> </span><span class="word">with</span><span> </span>
            <span class="word">hardly</span><span> </span><span class="word">any</span><span> </span>
            <span class="word">neck</span><span>, </span><span class="word">although</span><span> </span>
            <span class="word">he</span><span> </span><span class="word">did</span><span> </span>
            <span class="word">have</span><span> </span><span class="word">a</span><span> </span>
            <span class="word">very</span><span> </span><span class="word">large</span><span> </span>
            <span class="word">mustache</span><span>.</span>
        </p>
        <p class="para">
            <span class="word">Mrs</span><span>. </span><span class="word">Dursley</span><span> </span>
            <span class="word">was</span><span> </span><span class="word">thin</span><span> </span>
            <span class="word">and</span><span> </span><span class="word">blonde</span><span> </span>
            <span class="word">and</span><span> </span><span class="word">had</span><span> </span>
            <span class="word">nearly</span><span> </span><span class="word">twice</span><span> </span>
            <span class="word">the</span><span> </span><span class="word">usual</span><span> </span>
            <span class="word">amount</span><span> </span><span class="word">of</span><span> </span>
            <span class="word">neck</span><span>, </span><span class="word">which</span><span> </span>
            <span class="word">came</span><span> </span><span class="word">in</span><span> </span>
            <span class="word">very</span><span> </span><span class="word">useful</span><span> </span>
            <span class="word">as</span><span> </span><span class="word">she</span><span> </span>
            <span class="word">spent</span><span> </span><span class="word">so</span><span> </span>
            <span class="word">much</span><span> </span><span class="word">of</span><span> </span>
            <span class="word">her</span><span> </span><span class="word">time</span><span> </span>
            <span class="word">craning</span><span> </span><span class="word">over</span><span> </span>
            <span class="word">garden</span><span> </span><span class="word">fences</span><span>, </span>
            <span class="word">spying</span><span> </span><span class="word">on</span><span> </span>
            <span class="word">the</span><span> </span><span class="word">neighbors</span><span>. </span>
            <span class="word">The</span><span> </span><span class="word">Dursleys</span><span> </span>
            <span class="word">had</span><span> </span><span class="word">a</span><span> </span>
            <span class="word">small</span><span> </span><span class="word">son</span><span> </span>
            <span class="word">called</span><span> </span><span class="word">Dudley</span><span> </span>
            <span class="word">and</span><span> </span><span class="word">in</span><span> </span>
            <span class="word">their</span><span> </span><span class="word">opinion</span><span> </span>
            <span class="word">there</span><span> </span><span class="word">was</span><span> </span>
            <span class="word">no</span><span> </span><span class="word">finer</span><span> </span>
            <span class="word">boy</span><span> </span><span class="word">anywhere.</span>
        </p>
        <p>
            <span class="word">The</span><span> </span><span class="word">Dursleys</span><span class="word">
            </span><span class="word">had</span><span> </span><span class="word">everything</span><span> </span><span
                class="word">they</span><span class="word"> </span><span class="word">wanted</span><span>, </span><span
                class="word">but</span><span> </span><span class="word">they</span><span class="word">
            </span><span class="word">also</span><span> </span><span class="word">had</span><span class="word">
            </span><span class="word">a</span><span> </span><span class="word">secret</span><span>, </span><span
                class="word">and</span><span class="word">
            </span><span class="word">their</span><span> </span><span class="word">greatest</span><span class="word">
            </span><span class="word">fear</span><span> </span><span class="word">was</span><span> </span><span
                class="word">that</span><span class="word">
            </span><span class="word">somebody</span><span> </span><span class="word">would</span><span class="word">
            </span><span class="word">discover</span><span> </span><span class="word">it</span><span>. </span><span
                class="word">They</span><span class="word">
            </span><span class="word">didn't</span><span> </span><span class="word">think</span><span class="word">
            </span><span class="word">they</span><span> </span><span class="word">could</span><span> </span><span
                class="word">bear</span><span class="word">
            </span><span class="word">it</span><span> </span><span class="word">if</span><span class="word">
            </span><span class="word">anyone</span><span> </span><span class="word">found</span><span> </span><span
                class="word">out</span><span class="word">
            </span><span class="word">about</span><span> </span><span class="word">the</span><span class="word">
            </span><span class="word">Potters</span><span>. </span><span class="word">Mrs</span><span>. </span><span
                class="word">Potter</span><span class="word">
            </span><span class="word">was</span><span> </span><span class="word">Mrs</span><span>.
            </span><span class="word">Dursley's</span><span> </span><span class="word">sister</span><span>, </span><span
                class="word">but</span><span class="word">
            </span><span class="word">they</span><span> </span><span class="word">hadn't</span><span class="word">
            </span><span class="word">met</span><span> </span><span class="word">for</span><span> </span><span
                class="word">several</span><span class="word">
            </span><span class="word">years;</span><span> </span><span class="word">in</span><span class="word">
            </span><span class="word">fact</span><span>, </span><span class="word">Mrs</span><span>. </span><span
                class="word">Dursley</span><span class="word">
            </span><span class="word">pretended</span><span> </span><span class="word">she</span><span class="word">
            </span><span class="word">didn't</span><span> </span><span class="word">have</span><span> </span><span
                class="word">a</span><span class="word">
            </span><span class="word">sister</span><span>, </span><span class="word">because</span><span class="word">
            </span><span class="word">her</span><span> </span><span class="word">sister</span><span> </span><span
                class="word">and</span><span class="word">
            </span><span class="word">her</span><span> </span><span class="word">good-for-nothing</span><span>
            </span><span class="word">husband</span><span class="word"> </span><span class="word">were</span><span>
            </span><span class="word">as</span><span> </span><span class="word">unDursleyish</span><span class="word">
            </span><span class="word">as</span><span> </span><span class="word">it</span><span> </span><span
                class="word">was</span><span class="word">
            </span><span class="word">possible</span><span> </span><span class="word">to</span><span class="word">
            </span><span class="word">be</span><span>. </span><span class="word">The</span><span> </span><span
                class="word">Dursleys</span><span class="word">
            </span><span class="word">shuddered</span><span> </span><span class="word">to</span><span class="word">
            </span><span class="word">think</span><span> </span><span class="word">what</span><span> </span><span
                class="word">the</span><span class="word">
            </span><span class="word">neighbors</span><span> </span><span class="word">would</span><span class="word">
            </span><span class="word">say</span><span> </span><span class="word">if</span><span> </span><span
                class="word">the</span><span class="word">
            </span><span class="word">Potters</span><span> </span><span class="word">arrived</span><span class="word">
            </span><span class="word">in</span><span> </span><span class="word">the</span><span> </span><span
                class="word">street</span><span>.
            </span><span class="word">The</span><span> </span><span class="word">Dursleys</span><span class="word">
            </span><span class="word">knew</span><span> </span><span class="word">that</span><span> </span><span
                class="word">the</span><span class="word">
            </span><span class="word">Potters</span><span> </span><span class="word">had</span><span class="word">
            </span><span class="word">a</span><span> </span><span class="word">small</span><span> </span><span
                class="word">son</span><span class="word">,
            </span><span class="word">too</span><span>, </span><span class="word">but</span><span class="word">
            </span><span class="word">they</span><span> </span><span class="word">had</span><span> </span><span
                class="word">never</span><span class="word">
            </span><span class="word">even</span><span> </span><span class="word">seen</span><span class="word">
            </span><span class="word">him</span><span>. </span><span class="word">This</span><span> </span><span
                class="word">boy</span><span class="word">
            </span><span class="word">was</span><span> </span><span class="word">another</span><span class="word">
            </span><span class="word">good</span><span> </span><span class="word">reason</span><span> </span><span
                class="word">for</span><span class="word">
            </span><span class="word">keeping</span><span> </span><span class="word">the</span><span class="word">
            </span><span class="word">Potters</span><span> </span><span class="word">away;</span><span> </span><span
                class="word">they</span><span class="word">
            </span><span class="word">didn't</span><span> </span><span class="word">want</span><span class="word">
            </span><span class="word">Dudley</span><span> </span><span class="word">mixing</span><span> </span><span
                class="word">with</span><span class="word">
            </span><span class="word">a</span><span> </span><span class="word">child</span><span class="word">
            </span><span class="word">like</span><span> </span><span class="word">that</span><span>.</span>
        </p>
    </div>
</body>

</html>